<template>
	<view>


		<view class="search">
			<image style="width: 34rpx;height: 34rpx;margin: 23rpx 0 0 30rpx;" src="../../static/users/search.png"
				mode=""></image>
			<input class="ipt_h" @input="searchval" placeholder="请输入搜索内容" type="text" value="" />
		</view>

		<view class="search_suo" @click="search">
			搜索
		</view>

		<!-- 搜索历史记录 -->
		<view class="history" v-if="result">
			<view class="history_search" v-for="(item,index) in menu">
				<image class="image_time" src="../../static/users/history.png" mode=""></image>
				<text>{{item.name}} </text>
				<image class="cha" src="../../static/users/cha.png" mode=""></image>
			</view>

			<view class="di_xian"></view>

			<view class="clear_search">
				<text>清除搜索记录</text>
			</view>
		</view>

		<!-- 搜索结果 -->
		<view class="result_search" v-if="!result">
			<view :class="num==1?'title_res1 ji':'title_res1'" @click="jump(1)">
				商品
			</view>

			<view :class="num==2?'title_res2 ji':'title_res2'" @click="jump(2)">
				店家
			</view>

			<view class="" v-if="num==1">
				<view class="shai_xuan">
					<view class="text1">
						价格
						<image class="image_lou" src="../../static/users/xiaoliang.png" mode="aspectFill"></image>
					</view>

					<view class="xian">

					</view>

					<view class="text2">
						销量
						<image class="image_xiao" src="../../static/users/xiaoliang.png" mode="aspectFill"></image>
					</view>

				</view>

				<view class="detailback" v-for="(item,index) in menupoup">
					<image class="img_detail" src="../../static/users/shop.png" mode="aspectFill"></image>
					<view class="titles">
						灶门炭治郎手办,鬼灭之刃组合手办强...组合手办强...
					</view>

					<view class="have">
						已售100
					</view>

					<view class="price">
						<text>¥</text>
						366
					</view>

					<view class="guige" v-if="index%2==0">
						选规格
					</view>

					<view class="bujin" v-if="index%2!=0">
						<image class="image_bu_jian" @click="reduce(index)" src="../../static/users/jian.png"
							mode="aspectFill"></image>
						<view class="num">
							{{item.num}}
						</view>
						<image class="image_bu_jia" @click="add(index)" src="../../static/users/jia.png"
							mode="aspectFill">
						</image>
					</view>
				</view>
			</view>

			<view class="" v-if="num==2">
				<view class="shop_jian" v-for="(item,index) in list" @click="jumpshop(index)">
					<view class="title">
						鬼灭之刃动漫店 {{item}}
					</view>
					<image src="../../static/users/vip.png" class="vip_img" mode="aspectFill"></image>
					<image src="../../static/users/shop.png" class="shop_img" mode="aspectFill"></image>
					<view class="area">
						7号宿舍楼505
					</view>
					<view class="concent">
						只卖关于动漫一切周边，欢迎喜爱动漫的二刺猿光临小店，这里有海、手办、cos道具服装等...
					</view>
					<view class="youhui">
						<view class="youhui_one">
							10减5
						</view>
						<view class="fenge_xian"></view>
						<view class="youhui_two">
							45减10
						</view>
					</view>
					<view class="start_time">
						营业：08:00-22:00
					</view>
					<view class="liang">
						销量:2366
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				menupoup: [{
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}, {
					num: 1
				}],
				menu: [{
					name: "明朝珍珠妆"
				}, {
					name: "兰若庭汉服折扣价"
				}, {
					name: "珍珠发带"
				}],
				value: "",
				result: true,
				num: 1,
				list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
			}
		},
		methods: {
			searchval(e) {
				console.log(e.detail.value);
				if (e.detail.value) {
					this.result = true
				}
				this.value = e.detail.value
			},
			search() {
				if (this.value != "") {
					this.result = false
				}
			},
			jump(num) {
				console.log(11);
				this.num = num
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F4FA;
		position: absolute;
	}

	.search {
		margin: 40rpx 0 30rpx 30rpx;
		width: 610rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;

		.ipt_h {
			width: 500rpx;
			position: absolute;
			top: 0;
			left: 90rpx;
			height: 80rpx;
		}

	}

	.search_suo {
		position: absolute;
		top: 62rpx;
		right: 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #181818;
	}

	.history {
		padding-top: 10rpx;
		width: 750rpx;
		height: 1306px;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;
	}

	.di_xian {
		margin: 40rpx 0 43rpx 50rpx;
		width: 650rpx;
		height: 1px;
		background: #E5E5E5;
	}

	.history_search {
		margin: 30rpx 0;
		width: 750rpx;
		height: 30rpx;
		position: relative;

		.image_time {
			position: absolute;
			top: 6rpx;
			left: 60rpx;
			width: 30rpx;
			height: 30rpx;
			// margin-left: 60rpx;
		}

		text {
			position: absolute;
			top: 0;
			left: 112rpx;
		}

		.cha {
			position: absolute;
			right: 59rpx;
			top: 13rpx;
			width: 20rpx;
			height: 20rpx;
		}

	}

	.clear_search {
		width: 750rpx;
		height: 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #181818;
		text-align: center;
		line-height: 30rpx;
	}

	.result_search {
		width: 750rpx;
		height: 1306rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: absolute;

		.title_res1 {
			margin: 31rpx 0 0 100rpx;
			width: 210rpx;
			height: 74rpx;
			border-radius: 37rpx;
			text-align: center;
			line-height: 74rpx;
		}

		.title_res2 {
			position: absolute;
			top: 31rpx;
			left: 440rpx;
			width: 210rpx;
			height: 74rpx;
			color: #666666;
			border-radius: 37rpx;
			text-align: center;
			line-height: 74rpx;
		}

		.ji {
			background: #181818;
			color: #fff;
		}
	}




	.shai_xuan {
		margin: 20rpx 0 20rpx 30rpx;
		width: 690rpx;
		height: 68rpx;
		background: #F6F7F9;
		border-radius: 34rpx;
		position: relative;
	}

	.text1 {
		margin-left: 53rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;

		color: #666666;
		line-height: 68rpx;
		position: relative
	}

	.text2 {
		position: absolute;
		left: 224rpx;
		top: -68rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;

		color: #666666;
		line-height: 68rpx;
		position: relative
	}

	.image_lou {
		position: absolute;
		top: 32rpx;
		left: 82rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.image_xiao {
		position: absolute;
		top: 32rpx;
		left: 62rpx;
		width: 10rpx;
		height: 10rpx;
	}

	.xian {
		position: absolute;
		top: 19rpx;
		left: 184rpx;
		width: 1rpx;
		height: 30rpx;
		background: #FFFFFF;
	}

	.detailback {
		height: 190rpx;
		width: 750rpx;
		position: relative;
	}

	.img_detail {
		margin: 20rpx 0 0 30rpx;
		width: 180rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	.titles {
		position: absolute;
		top: 17rpx;
		left: 232rpx;
		width: 477rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.have {
		position: absolute;
		left: 232rpx;
		top: 63rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
	}

	.price {
		position: absolute;
		top: 102rpx;
		left: 232rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF4646;

		text {
			font-size: 20rpx;
		}
	}

	.guige {
		position: absolute;
		right: 30rpx;
		top: 107rpx;
		width: 89rpx;
		height: 36rpx;
		background: #F48F5B;
		border-radius: 18rpx;
		text-align: center;
		line-height: 36rpx;

		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.bujin {
		position: absolute;
		left: 600rpx;
		top: 107rpx;
		width: 200rpx;
		height: 36rpx;

	}

	.image_bu_jian {
		width: 36rpx;
		height: 36rpx;
	}

	.image_bu_jia {
		margin-left: 48rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.num {
		position: absolute;
		left: 36rpx;
		top: 0;
		width: 48rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: center;
	}


	.shop_jian {
		margin-left: 30rpx;
		width: 690rpx;
		height: 260rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;
		margin-top: 20rpx;

		.title {
			margin: 29rpx 0 0 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
			line-height: 80rpx;
		}

		.shop_img {
			margin: 0rpx 0 0 30rpx;
			width: 180rpx;
			height: 150rpx;
			border-radius: 40rpx;
		}

		.area {
			position: absolute;
			right: 30rpx;
			top: 0rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
			line-height: 80rpx;
		}

		.concent {
			position: absolute;
			top: 92rpx;
			right: 31rpx;
			width: 429rpx;
			height: 56rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #181818;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.youhui {
			position: absolute;
			left: 229rpx;
			bottom: 80rpx;
			width: 160rpx;
			height: 28rpx;
			border: 1px solid #FF5252;
			border-radius: 14rpx;
			position: relative;

			.youhui_one {
				margin: 0rpx 0 0 16rpx;
				font-size: 19rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF5252;
				line-height: 25rpx;
			}

			.youhui_two {
				position: absolute;
				top: 0;
				right: 16rpx;
				font-size: 19rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FF5252;
				line-height: 25rpx;
			}

			.fenge_xian {
				position: absolute;
				top: 5rpx;
				left: 74rpx;
				width: 1px;
				height: 18rpx;
				background: #FF5252;
			}
		}

		.start_time {
			position: absolute;
			bottom: 30rpx;
			left: 231rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.liang {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.vip_img {
		position: absolute;
		top: 79rpx;
		left: 150rpx;
		width: 60rpx;
		height: 30rpx;
		z-index: 5;
	}
</style>
